<!-- 失信案件扫描 -->
<template>
	<view class="card d-flex">
		<view class="card_head relative d-flex mb-30">
			<text class="card_head_title relative">{{ title }}</text>
		</view>
		
		<view class="card_content d-flex">
			<view class="card_content_title d-flex pb-40 mb-40">
				<text class="card_content_title_val bold color2 mb-5">{{ info.length }}</text>
				<text class="card_content_title_label">{{ subtitle }}</text>
			</view>
			
			<view class="card_item d-flex">
				<view class="jc" v-for="(item, index) of info" :key="index">
					<view class="jc_head d-flex mb-30">
						<text class="jc_item">案号：{{ item.c_ah }}</text>
						
						<view class="menu" :style="{transform: menu ? 'rotateZ(0deg)' : 'rotateZ(180deg)'}">
							<Icon :style="{transform: menu ? 'rotateZ(0deg)' : 'rotateZ(180deg)'}" class="menu_icon" name="arrow-up" color="#6642EA" size="22rpx" />
						</view>
					</view>
					
					<view class="jc_msg d-flex">
						<text class="jc_item mb-10">案件类型：{{ item.n_ajlx }}</text>
						<text class="jc_item mb-10">法院名称：{{ item.n_jbfy }}</text>
						<text class="jc_item mb-10">立案时间：{{ item.d_larq }}</text>
						<!-- <text class="jc_item mb-10">审结/判决时间：{{ info.publishdate }}</text> -->
						<text class="jc_item mb-10">结案时间：{{ item.d_jarq }}</text>
						<text class="jc_item mb-10">案由： {{ item.n_laay }}</text>
						<text class="jc_item">案件状态：{{ item.n_ajjzjd }}</text>
						<!-- <text class="jc_item mb-10">内容摘要：***********************</text> -->
						<!-- <text class="jc_item mb-10">依据：**************</text> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		nextTick,
		defineProps
	} from 'vue'
	import Icon from '@/components/Icon/index.vue';
	
	const menu = ref(false)
	
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		subtitle: {
			type: String,
			default: ''
		},
		info: {
			type: Array,
			default: () => []
		}
	})
</script>

<style lang="scss" scoped>
.card {
	flex-direction: column;
	
	&_content {
		flex-direction: column;
		
		&_title {
			border-bottom: 1px dashed rgb(220, 223, 230);
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			&_val {
				font: {
					size: 32rpx
				}
			}
			&_label {
				font: {
					size: 28rpx
				}
			}
		}
		
		.jc {
			width: 100%;
			padding: 0 25rpx;
			&_head {
				align-items: center;
				justify-content: space-between;
				
				.menu {
					align-items: center;
					color: #6642EA;
					font: {
						size: 25rpx
					}
					
					&_icon {
						transition: .3s;
						padding: 3rpx;
						border-radius: 50%;
						border: 1px solid #6642EA;
					}
				}
			}
			
			&_item {
				color: #6C7282;
				font: {
					size: 25rpx
				}
			}
			
			&_msg {
				flex-direction: column;
			}
		}
	}
}     
</style>
